<template>
  <view class="newUser">
    <image
      mode="aspectFill"
      :src="asyncImgs.index.bg3"
      class="module-bg"
    ></image>
    <view class="newUserContent">
      <view class="newUserData">
        <view class="newUserTit">
          <view class="title">
            <view class="titLet">新人首单专享</view>
            <view class="titRig">超值特惠 任选一件</view>
          </view>

          <view
            class="more"
            @click="$utils.toUrl(`/marketing/newUser/list/index`)"
            >更多</view
          >
        </view>

        <scroll-view scroll-x class="list">
          <view
            class="item"
            v-for="(sku, i) in items"
            :key="i"
            @click="$utils.toUrl(`/goods/goods/goods?id=${sku.id}`)"
          >
            <view class="img"
              ><image :src="sku.cover_pic" mode="aspectFill"></image>
            </view>
            <view class="txt">
              <view class="tit">{{ sku.name }}</view>
              <view class="price">
                <view class="let">
                  {{ sku.price | priceBeforeZero }}
                  {{ sku.price | priceAfterZero }}
                </view>
                <view class="rig" @click.stop="$emit('add', sku)">
                  <i class="iconfont icon-add-select"></i>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "newUser",
  props: {
    items: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  filters: {
    priceBeforeZero(val) {
      if (!val) val = "";
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (!val) val = "";
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
};
</script>

<style lang="scss" scoped>
.newUser {
  position: relative;
  border-radius: 24rpx;
  z-index: 2;
  margin: 0 24rpx 20rpx;

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 24rpx;
  }
}

.newUserData {
  padding: 24rpx 24rpx 30rpx;
}

.newUserTit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;

  .title {
    flex: 1;
    display: flex;
    align-items: flex-end;
    line-height: 1;
  }

  .titLet {
    margin-right: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

  .titRig {
    font-size: 24rpx;
  }
}

.list {
  padding: 20rpx 0 10rpx;
  white-space: nowrap;
  overflow-x: auto;
  .item {
    display: inline-block;
    margin-right: 20rpx;
    width: 180rpx;
    padding: 10rpx 0;
    vertical-align: middle;
    background: #fff;
    border-radius: 8rpx;
    overflow: hidden;
    box-sizing: border-box;
  }

  .img {
    margin: 14rpx auto 16rpx;
    width: 148rpx;
    height: 134rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .txt {
    padding: 0 8rpx;
  }
  .tit {
    margin: 12rpx 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 24rpx;
    font-weight: bold;
    color: #262626;
  }
  .price {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .let {
      font-size: 24rpx;
      color: #fa2c1b;
      font-weight: bold;

      &:before {
        content: "￥";
        font-size: 20rpx;
      }
    }

    .rig {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42rpx;
      height: 42rpx;
      border-radius: 8px;
      background: #f0250e;
      color: #fff;
      font-weight: bold;
    }
  }
}
</style>
